<template>
	<div id="building">
		<!-- 旧页面 -->
		<el-form :rules="rules" ref="loginForm" :model="loginForm" class="loginContainer">
			<h3 class="loginTitle">欢迎登录超市商品管理系统</h3>
			
			<el-form-item prop="id">
				<el-input v-model="loginForm.id" placeholder="请输入用户ID"></el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input type="password" v-model="loginForm.password" placeholder="请输入密码"></el-input>
			</el-form-item>
			
			<el-button round @click="submitLogin()">登录</el-button>
		</el-form>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				msg: '',
				loginForm: {
					id: '2019082307',
					password: '123456',
				},
				rules: {
					id: [{
						required: true,
						message: '请输入用户ID',
						trigger: 'blur'
					}, ],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}, ],
				}
			}
		},
		methods: {
			submitLogin() {
				this.$refs.loginForm.validate((valid) => {
					if (valid) {
						//发送axios请求
						this.$axios.post("http://localhost:8088/staff/login", this.loginForm)
							.then((res) => {
								console.log(res);
								let u = res.data;
								if (u) {
									//把当前用户信息保存到本地
									// localStorage.setItem('login_user', JSON.stringify(u))
									this.$message.success("登陆成功！");
									this.$router.push("/Home");
								} else {
									this.$message.success("登陆失败，请检查用户名或密码！");
								}
							})
							.catch((err) => {
								// console.log("error = ", error);
								this.$message.error("登陆失败，请检查用户名或密码！");
							})
					} else {
						this.$message.error("请填写完整信息！");
					}
				});
			},
		}
	}
</script>

<style scoped="scoped">
	.myclass{
		margin-top: 10px;
		padding-left: 150px;
		width: 350px;
	}
	
	#building{
		background:url("../assets/22.png");
		width:100%;			
		height:100%;			
		position:fixed;
		background-size:100% 100%;
	}
	
	.el-button {
		width: 100%;
	}

	.loginContainer {
		border-radius: 15px;
		background-clip: padding-box;
		margin: 188px auto;
		width: 350px;
		padding: 15px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;
		background-color: rgba(156, 105, 232, 0.7);
	}

	.loginTitle {
		margin: 8px auto 20px auto;
		text-align: center;
	}

	.changeImg {
		width: 200px;
		margin-right: 5px;
	}
</style>
